<template>
    <div class="full-box shadow-box padding-box">
        <OperateCommon :showSearch="true" @search="initData">
            <template #condition>
                <div class="condition-item">
                    <label>项目名称：</label>
                    <el-input v-model="queryParams.project_name" placeholder=""/>
                </div>
                <div class="condition-item">
                    <label>责任单位：</label>
                    <DeptCascader
                        :options="dept"
                        :defaultChecked.sync="queryParams.responsible_unit_id"
                        @change="changeDept"
                    ></DeptCascader>
                </div>
            </template>
        </OperateCommon>
        <div class="table-wrapper">
            <BaseTable
                :columns="columns"
                :showSort="true"
                :tableData="tableData"
                :pages="{
                  show: true,
                  count: count,
                }"
                :stripe="false"
                :operate="{show: false}"
                @pagination="pageChange">
                <el-table-column
                    v-for="item in columns_slot"
                    :prop="item.prop"
                    :label="item.label"
                    :min-width="item.minWidth"
                    align="center">
                    <template slot-scope="scope">
                        <div :class="{number:item.label!=='总计'}" @click="goTo(scope.row,item)">
                            {{ scope.row[item.prop] }}
                        </div>
                    </template>
                </el-table-column>
            </BaseTable>
        </div>
    </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import {
    dailyStatistics,
} from "@/api/MajorProjectPromotion/Index";
import commonList from "@/mixins/commonList";
import queryItem from "./components/queryItem";
import BaseTable from "@/components/Common/BaseTable.vue";
import DeptCascader from '@/components/Common/DeptCascader.vue';
export default {
    name: "Statistics",
    mixins: [commonList,queryItem],
    components: { OperateCommon,BaseTable,DeptCascader },
    data(){
        return{
            tableData: [],
            columns:[
                {prop:"project_name",label:"项目名称",width:"",minWidth:"150",align:"",},
                {prop:"responsible_unit_name",label:"责任单位",width:"",minWidth:"150",align:"",},
            ],
            columns_slot:[
                {prop:"num1",label:"招投标",path:"/workCollectionBidding",minWidth:"80"},
                {prop:"num2",label:"工程合同",path:"/workCollectionProjectContract",minWidth:"80"},
                {prop:"num3",label:"工程变更",path:"/workCollectionProjectChanges",minWidth:"80"},
                {prop:"num4",label:"人员变更",path:"/workCollectionManager",minWidth:"80"},
                {prop:"num5",label:"竣工验收",path:"/workCollectionCompletionAcceptance",minWidth:"80"},
                {prop:"num6",label:"绩效自评",path:"/workCollectionPerformanceSelfAssessment",minWidth:"80"},
                {prop:"num7",label:"安全事故",path:"/workCollectionSecurityIncident",minWidth:"80"},
                {prop:"num8",label:"总计",path:"",minWidth:"80",},
            ],
            count: 0,
            queryParams:{
                pageNum: 1,
                pageSize: 20,
                project_name:'',
                responsible_unit_id:'',
            },
        }
    },
    created() {
        this.initData();
    },
    methods:{
        initData(){
            dailyStatistics(this.queryParams).then(res => {
                if (res.code == 0) {
                    this.tableData = res.data;
                    this.count = res.num;
                }
            })
        },
        pageChange(val) {
            this.queryParams.pageNum = val.pageNum;
            this.queryParams.pageSize = val.pageSize;
            this.initData();
        },
        //跳转
        goTo(row,item){
            if(item.label!=='总计'){
                this.$router.push({path:item.path,query:{id:row.id}});
            }
        },
    }
}
</script>

<style scoped lang="scss">
:deep(.el-table__row) {
    color: #000;
    font-weight: 600;
    td {
        &:nth-child(4) {
            background-color: rgb(244, 244, 245);
        }
        &:nth-child(5) {
            background-color: rgb(254, 240, 240);
        }
        &:nth-child(6) {
            background-color: rgb(236, 245, 255);
        }
        &:nth-child(7) {
            background-color: rgb(240, 249, 235);
        }
        &:nth-child(8) {
            background-color: rgb(253, 246, 236);
        }
        &:nth-child(9) {
            background-color: rgb(236, 238, 253);
        }
        &:nth-child(10) {
            background-color: rgb(251, 236, 253);
        }
    }
    .number {
        display: inline-block;
        min-width: 25px;
        min-height: 25px;
        padding: 2px 5px;
        cursor: pointer;
        &:hover {
            border-radius: 50%;
            color: #fff;
            background-color: #808080;
        }
    }
}
</style>